<template>
	<view class="backlog-declare-detail" v-if="Object.keys(appealInfo).length > 0">
		<l-file ref="lFile"></l-file>
		<!-- 顶部背景图区域 -->
		<u-image class="bg-image" width="100%" height="283rpx" src="@/static/image/home/data_statistics/bg.png">
		</u-image>
		<!-- <view class="item1">
			<title-tools :title="appealInfo.enterprise_name" fontSize="30rpx"></title-tools>
			<view class="content">
				{{appealInfo.content}}
			</view>
			<view class="img-wrap" v-if="appealInfo.material_files">
				<u-image class="img" v-for="(item,index) in appealInfo.imgArr" :key="index" @click="previewImage(item)"
					width="200rpx" height="200rpx" border-radius="10rpx" :src="item"></u-image>
			</view>
		</view> -->
		<view class="card">
			<view class="flex align_center marbot16">
				<view class="flex_1" style="margin-right: 24rpx;">
					<view class="flex align_center marbot16">
						<view class="tip" style="margin-right: 12rpx;">{{appealInfo.appear_type}}</view>
						<view class="tip">{{appealInfo.is_solve == 1?'未处理':appealInfo.is_solve == 2?'已处理':'办理中'}}</view>
					</view>
					<view class=" bold " style="font-size: 32rpx;">{{appealInfo.title}}</view>
				</view>
				<!-- <view :class="aisuss?'aiBut_act':'aiBut_not'" @click="aisuss?handleAijianyi():''" >AI建议</view> -->
			</view>
			<view class="marbot16 heis">{{appealInfo.createtime}}</view>
			<view class="line marbot16"></view>
			<!-- 普通展示 -->
			<view class="heis martop16">{{appealInfo.content}}</view>
			<!-- 九宫布局图片 -->
			<view class="flex flex_wrap martop16">
				<view class="relative" style="width: calc((100% / 3) - 20rpx);margin: 10rpx;height: 0;padding-bottom: calc((100% / 3) - 20rpx);" v-for="(iten,ind) in appealInfo.material_files" :key='iten'>
					<image :src="iten.url" mode="aspectFill" style="width: 100%;height: 100%;display: block;position:  absolute;top:0;left: 0;border-radius: 8rpx;" @click.stop="handleImg(iten.url)" v-if="iten.type == 'img'"></image>
					<video @click.stop="handleVideo(iten.url)" :src="iten.url" :controls='false' :show-fullscreen-btn='false' :show-center-play-btn='false' :show-play-btn='false' v-if="iten.type == 'video'" style="width: 100%;height: 100%;position: absolute;"></video>
				</view>
			</view>
			<!-- 语音展示 -->
			<view class="yuyinBox shodow flex align_center martop16" style="width: 60%;" v-if="appealInfo.voice_file" @click.stop="handleYuyinPaly(appealInfo)">
				<view class="" style="margin-right: 10rpx;">
					<image src="/static/image/yuyin_no.png" mode="" style="width: 28rpx;height: 28rpx;display: block;" v-if="!appealInfo.flag"></image>
					<image src="/static/image/yuyin_act.gif" mode="" style="width: 28rpx;height: 28rpx;display: block;" v-if="appealInfo.flag"></image>
				</view>
				<view class="">{{appealInfo.voice_time}}</view>
			</view>
		</view>
		<view class="card">
			<!-- <title-tools title="AI建议" fontSize="32rpx"></title-tools> -->
			<view class="title-tools-wrap flex align_center">
				<view class="left-icon" style="margin-right: 10rpx;">
					
				</view>
				<view class="title-text" style="font-size: 34rpx;font-family: 600;margin-right: 10rpx;">
					AI建议
				</view>
				
				<view class="blueTip" >
					飞点AI创新实验室
				</view>
			</view>
			<view class="" style="min-height: 400rpx;margin-top: 20rpx;">
				<text class="animated-text" v-if="aisuss">{{testText}}</text>
				<view class="flex justify_center align_center flex_column" style="height: 400rpx;" v-else>
					<u-loading mode="circle" color="#2979ff" size='80'></u-loading>
					<view class="font28 heis" style="margin-top: 20rpx;">AI建议获取中...</view>
				</view>
			</view>
		</view>
		
		
		<view class="box">
			<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="change"></u-tabs>
			<view class="line"></view>
			<!-- <schedule v-if="current === 1"></schedule> -->
			<view v-if="level !== '5'">
				<view class="wrap" v-if="current === 0">
					<view class="radio-wrap">
						<!-- <view class="feedback radio" @click="radioCheck(1)">
								<u-image width="36rpx" height="36rpx" :src="currentRadio === 1 ? '../../../../static/image/home/radio_hg_img.png' : '../../../../static/image/home/radio_img.png'"></u-image>
								<text>反馈</text>
							</view>
							<view class="assign radio" @click="radioCheck(2)">
								<u-image width="36rpx" height="36rpx" :src="currentRadio === 2 ? '../../../../static/image/home/radio_hg_img.png' : '../../../../static/image/home/radio_img.png'"></u-image>
								<text>交办</text>
							</view> -->
						<u-radio-group v-model="currentRadio" @change="radioGroupChange">
							<u-radio v-for="(item, index) in list" :key="index" :name="item.value"
								:disabled="item.disabled">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
					<view class="search" @click="toSearchPage">
						<u-search v-show="currentRadio === 1" disabled shape="round" height="50" placeholder="搜索相关诉求"
							:show-action="false"></u-search>
					</view>
				</view>
				<view class="input" v-if="current === 0 && level != 5">
					<u-input class="textarea-input" cursor-spacing="60" :custom-style="inputCustomStyle"
						v-model="remark" :placeholder="currentRadio == 1 ? '请填写反馈内容' : '请填写备注内容'" maxlength="10000"
						height="400" type="textarea" @input="inputChange" :clearable="false"></u-input>
					<!-- <view class="" v-if="currentRadio == 1">
						<view class="" style="color: #999;">
							请将文件上传至文件助手
						</view>
						<view class="file-list">
							<view class="file-item" v-for="(item, index) in fileList" :key="item.url">
								<view class="name font-overflow" @click="previewFile(item.fullUrl)">
									{{item.fileName}}
								</view>
								<view class="delete-btn" @click="removeFile(index)">
									移除
								</view>
							</view>
						</view>
						<view v-if="fileList.length < 3">
							<lsj-upload ref="lsjUpload" width="100px" height="180rpx" childId="upload" :size="10"
								:option="optionConfig" v-model="percent" @input="onInput" @callback="onCallback">
								<view class="upload-btn" style="height: 180rpx;">上传附件</view>
							</lsj-upload>
						</view>
					</view> -->
				</view>
				<!-- 按钮 -->
				<view class="btn-wrap" v-if="current === 0 && level != 5">
					<view class="btn">
						<u-button @click="handleClick" :custom-style="customStyle2">
							{{currentRadio === 1 ? '确认反馈' : '选择交办人'}}
						</u-button>
					</view>
				</view>

			</view>
			<view v-if="level == 5 && current === 0">
				<comment :detail="appealInfo"></comment>
			</view>
			<view v-if="current === 1">
				<schedule :data="appealInfo.record"></schedule>
			</view>
		</view>
	
	
		<!-- AI建议弹窗 -->
		<u-modal v-model="aiShow" :show-title='false' :show-confirm-button='false' width='650rpx'>
			<view class="" style="font-size: 32rpx;font-weight: 600;text-align: center;padding: 12rpx 0;">AI建议</view>
			<scroll-view scroll-y="true" style="height: 600rpx;">
				<view style="padding: 24rpx;">{{aicontent}}</view>
			</scroll-view>
			<view class="flex justify-center" style="padding: 24rpx;">
				<view class="AIbut" @click="aiShow = false">确 认</view>
			</view>
		</u-modal>
		
		<videoMax :isShowVideo='isShowVideo' :videoUrl='videoUrl' @colse='handlecolse'></videoMax>
	</view>
</template>

<script>
	import Comment from '@/pages/index/components/commont/Commont.vue'
	import Schedule from '@/pages/index/schedule/Schedule.vue'
	import TitleTools from '@/components/title-tools/TitleTools.vue'
	import videoMax from "@/components/video_max/video_max.vue";
	import {
		apiAppealRecord,
		apiGetAppealRecord,
		apiGetAppealByid
	} from '@/api/backlog/backlog.js'
	import CONFIG from '@/config/config.js'
	import { dateFormats } from '@/utils/utils.js'
	export default {
		name: 'BacklogDeclareDetail',
		components: {
			TitleTools,
			Schedule,
			Comment,
			videoMax
		},
		data() {
			return {
				baseUrl: getApp().globalData.baseUrl,
				//tabs标签栏数据
				tabList: [{
						name: '诉求反馈'
					},
					{
						name: '跟进记录'
					}
				],
				//tabs选中项下标
				current: 0,
				//反馈信息
				feedback: '',
				//备注信息
				remark: '',
				//交办按钮样式
				customStyle1: {
					fontSize: '40rpx',
					color: '#fff',
					backgroundColor: '#929292',
					borderRadius: '20rpx'
				},
				//提交反馈按钮样式
				customStyle2: {
					fontSize: '40rpx',
					color: '#fff',
					backgroundColor: '#196EFF',
					borderRadius: '20rpx'
				},
				//文本域样式
				inputCustomStyle: {
					// textIndent: '30rpx',
					paddingRight: '30rpx',
					overflowY: 'auto',
					borderRadius: '10rpx',
					backgroundColor: '#EAF1F9'
				},
				//单选框选中
				currentRadio: 1,
				//单选框数据
				list: [{
						name: '反馈',
						value: 1,
						disabled: false
					},
					{
						name: '交办',
						value: 2,
						disabled: false
					}
				],
				level: getApp().globalData.level,
				//代办事项id
				id: '',
				//代办事项详情
				appealInfo: {},
				optionConfig: {},
				percent: '',
				fileList: [

				],
				
				
				
				
				innerAudioContext:null,
				clearTime:null,   //定时器
				isShowVideo:false,
				videoUrl:'',
				
				
				aiShow:false,
				aisuss:false,
				aicontent:'',
				access_token:'',
				
				
				
				numindex:0,
				testText:'',
			}
		},
		onReady() {
			// 初始化参数并创建上传DOM
			this.optionConfig = {
				url: 'https://gxkfs.yoyosc.com.cn/api/common/upload', //替换为你的接口地址
				name: 'file', // 附件key
				size: 10, // 附件上传大小上限(M)，默认10M
				debug: true,
				//根据你接口需求自定义请求头
				header: {
					token: uni.getStorageSync('token')
				},
				//根据你接口需求自定义body参数
				// formData: {
				// 	'orderId': 1000
				// }
			};
		},
		onLoad(e){
			this.innerAudioContext = uni.createInnerAudioContext();
			this.baseUrl = CONFIG.baseUrl
			
		},
		onShow() {
			
			//中台只能交办
			if (this.level == '1') {
				this.list.shift();
				this.currentRadio = 2;
				this.remark = '请求协调或者处理';
			}
			
			if (this.level == '5') {
				this.tabList[0].name = '评论'
			}
			this.id = this.$Route.query.id;
			//获取代办事项
			this.apiGetAppealByid().catch(err => {
				console.log(err)
			})

			// //获取传递过来的材料
			// const query = this.$Route.query;
			// //判断是否有传递参数
			// if (Object.keys(query).length > 0) {
			// 	// 拼接序号
			// 	query.questionArr.forEach((item, index, arr) => {
			// 		arr[index] = `（${index + 1}）` + item;
			// 	})
			// 	//将数组转成字符串放入文本域中
			// 	this.feedback = query.questionArr.join(',')
			// }
		},
		methods: {
			test(){
				let _this = this
				let originalText = this.aicontent;
				this.testText += originalText[this.numindex];
				this.numindex++;
				if (this.numindex < originalText.length) {
					setTimeout(()=>{
						_this.test()
					}, 10); // 调整打印速度，单位为毫秒
				}
			},
			async handleTest(){
				let _this = this
				let content = _this.appealInfo.content
					uni.request({
						'method': 'POST',
						'url': 'https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions_pro?access_token=' +  _this.access_token,
						'headers': {
						        'Content-Type': 'application/json'
						},
						data: {
						    "messages": [
						        {
						            "role": "user",
									
						            "content": `作为一个社区工作者，请问一下问题如何处理？：${content}`
						        }
						    ],
							// "stream":true,
						    "disable_search": false,
						    "enable_citation": false
						},
						        
						success:res=>{
							console.log(res)
							_this.aicontent = res.data.result
							_this.aisuss = true
							uni.request({
								url:'https://ydsq.chuangxing.ren/api/index/save_anwser',
								method:'POST',
								header:{
									token:uni.getStorageSync('token')
								},
								data:{
									question:`作为一个社区工作者，请问一下问题如何处理？：${content}`,
									answer:res.data.result
								}
							})
							_this.test()
						}
					})
			},
			getAccessToken(){
				const AK = "MThGvR59jAnYtzbSI1GONUBc"
				const SK = "zCUbMuvNoL5L5BAKLHDs27h70Oqj36U9"
				uni.request({
					'method': 'POST',
					'url': 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=' + AK + '&client_secret=' + SK,
				}).then(res=>{
					console.log(res)
					this.access_token = res[1].data.access_token
					// return res[1].data.access_token
					this.handleTest()
				})
			},
			handleAijianyi(){   // 显示AI 建议
				this.aiShow = true
			},
			handleYuyinPaly(item){  // 语音播报
				let _this = this
				if(this.clearTime){
					clearTimeout(_this.clearTime)
				}
				
				if(_this.innerAudioContext){
					_this.innerAudioContext.autoplay = true;
					_this.innerAudioContext.src = _this.baseUrl + item.voice_file;
					_this.clearTime = setTimeout(()=>{
						_this.innerAudioContext.pause();
						_this.innerAudioContext.destroy()
						_this.innerAudioContext = null
						_this.appealInfo.flag = false
					},(item.voice_time - 0) * 1000)
				}else{
					_this.innerAudioContext = uni.createInnerAudioContext();
					_this.innerAudioContext.autoplay = true;
					_this.innerAudioContext.src = _this.baseUrl + item.voice_file;
					
					_this.clearTime = setTimeout(()=>{
						_this.innerAudioContext.pause();
						_this.innerAudioContext.destroy()
						_this.innerAudioContext = null
						_this.appealInfo.flag = false
					},(item.voice_time - 0) * 1000)
				}
				
				this.appealInfo.flag = !item.flag
			},
			handleImg(url){  // 查看图片
				uni.previewImage({
					urls:[url],
				})
			},
			handlecolse(){
				this.isShowVideo = false
			},
			handleVideo(url){  // 查看图片
				this.isShowVideo = true
				this.videoUrl = url
			},
			onInput(e) {
				console.log('上传进度', e);
			},
			onCallback(e) {
				console.log(e)
				const {
					data,
					code
				} = JSON.parse(e.responseText);
				
				if (code == 0) {
					uni.$u.toast('文件格式错误');
					return
				}
				
				const obj = {
					fileName: e.fileName,
					fullUrl: data.fullurl,
					url: data.url
				}
				//上传文件列表
				this.fileList.push(obj)
				console.log('上传结果', e);
			},
			//tabs标签选中改变时触发
			change(index) {
				this.current = index;
				if (index === 1) {
					//获取跟进记录
					this.apiGetAppealRecord();
				}
			},
			//反馈信息输入框输入触发
			inputChange() {

			},
			//点击搜索框跳转搜索页面
			toSearchPage() {
				this.$Router.push({
					name: 'search'
				})
			},
			//选中项
			radioCheck(current) {
				this.currentRadio = current;
			},
			//按钮点击
			handleClick() {
				let that = this
				if (this.remark.trim().length === 0) {
					this.$u.toast('请填写内容')
					return
				}
				//执行反馈逻辑
				if (this.currentRadio === 1) {
					that.apiAppealRecord();
					uni.showToast({
						title: '反馈成功',
						icon: 'success'
					})
					setTimeout(() => {
						that.$Router.back(1);
					}, 500)

				} else if (this.currentRadio === 2) {
					//执行交办逻辑
					this.$Router.push({
						name: 'address_list',
						params: {
							info: JSON.stringify(this.appealInfo),
							remark: this.remark
						}
					})
				}
			},
			//单选框选中改变时触发
			radioGroupChange(e) {
				this.remark = '';
				this.currentRadio = e;
				console.log(e)
				if (this.currentRadio == 2) {
					this.remark = '请求协调或者处理';
				}
			},
			//获取跟进记录
			async apiGetAppealRecord() {
				const res = await apiGetAppealRecord(this.id);
			},
			//获取代办事项详情
			async apiGetAppealByid() {
				const res = await apiGetAppealByid(this.id);
				console.log(res)
				let _this = this
				let imageRegex = /\.(jpg|jpeg|png|gif)$/i;
				let videoRegex = /(mp4|avi|mov)/i;
				let arr = []
				let url = ''
				let type = ''
				if(res.data.material_files.length != 0){
					let zongArr = res.data.material_files.split(',')
					zongArr.map((vv,ii)=>{
						url = this.baseUrl +  vv
						if(imageRegex.test(vv)){
							type = 'img'
						}
						if(videoRegex.test(vv)){
							type = 'video'
						}
						arr.push({url,type})
					})
				}
				
				res.data.material_files = arr
				res.data.createtime = dateFormats(res.data.createtime * 1000,'Y-m-d H:i')
				res.data.flag = false
				res.data.record.pop()
				this.appealInfo = res.data;
				uni.request({
					url:'https://ydsq.chuangxing.ren/api/index/get_anwser',
					method:'POST',
					header:{
						token:uni.getStorageSync('token')
					},
					data:{
						question:`作为一个社区工作者，请问一下问题如何处理？：${res.data.content}`,
					},
					success:resd=>{
						console.log(resd)
						if(resd.data.data){
							_this.aicontent = resd.data.data.answer
							_this.aisuss = true
							_this.test()
						}else{
							_this.getAccessToken()
						}
					}
				})
				// _this.getAccessToken()
				// this.appealInfo.imgArr = this.setImgPath(this.appealInfo.material_files)
			},
			//处理图片路径
			setImgPath(str) {
				const arr = str.split(',');
				arr.forEach((item, index) => {
					arr[index] = this.baseUrl + item;
				})
				return arr;
			},
			//交办事项
			async apiAppealRecord() {
				const extra_link = [] 
				const file_names = []
				this.fileList.forEach(item => {
					extra_link.push(item.url);
					file_names.push(item.fileName);
				})
				const organization_classify_id = getApp().globalData.organization_classify_id;
				const res = await apiAppealRecord(this.id, 0, 2, this.remark, extra_link.join(','), file_names.join(
					','), organization_classify_id);
			},
			//图片预览
			previewImage(src) {
				wx.previewImage({
					current: src, // 当前显示图片的http链接
					urls: this.appealInfo.imgArr // 需要预览的图片http链接列表
				})
			},
			//订阅消息
			handleMessage() {
			
			},
			//移除附件
			removeFile(index) {
				this.fileList.splice(index, 1);
			},
			previewFile (url) {
				this.$refs.lFile.download({
						url
					})
					.then(path => {
						/* 打开附件 */
						this.$refs.lFile.open(path);
					});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.backlog-declare-detail {
		padding: 10rpx 20rpx;
	}

	.bg-image {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
	}

	//代办事项内容样式
	.item1 {
		padding: 30rpx;
		width: 710rpx;
		min-height: 482rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.content {
			margin-top: 30rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #000000;
		}

		.img-wrap {
			display: flex;
			margin-top: 30rpx;

			.img:not(:first-child) {
				margin-left: 20rpx;
			}
		}
	}
	.card{
		padding: 24rpx;
		background: #fff;
		margin-bottom: 24rpx;
		border-radius: 20rpx;
		.tip{
			padding: 2rpx 4rpx;
			border-radius: 8rpx;
			border: 1rpx solid #FF7D04;
			color: #FF7D04;
			font-size: 24rpx;
		}
		.yuyinBox{
			padding: 16rpx 24rpx;
			border-radius: 34rpx;
			background: #2979ff;
			color:#fff;
		}
		.aiBut_act{
			padding: 12rpx 40rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #fff;
			border-radius: 36rpx;
			background: #196EFF;
		}
		.aiBut_not{
			padding: 12rpx 40rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #fff;
			border-radius: 36rpx;
			background: #ccc;
		}
		.line{
			width: 100%;
			height: 1rpx;
			background: rgba(0, 0, 0, .15);
		}
		.steps{
			padding: 12rpx 24rpx;
			position: relative;
			&::after{
				content: '';
				width: 1rpx;
				height: 100%;
				background: rgba(0,0,0,.4);
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
			}
			&::before{
				content: '';
				width: 20rpx;
				height: 20rpx;
				border: 1rpx solid rgba(0,0,0,.4);
				border-radius: 12rpx;
				background:  #fff;
				position: absolute;
				left: -11rpx;
				top: 0;
				z-index: 4;
			}
		}
		.steps_act{
			padding: 12rpx 24rpx;
			position: relative;
			&::after{
				content: '';
				width: 1rpx;
				height: 100%;
				background: #2979ff;;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
			}
			&::before{
				content: '';
				width: 20rpx;
				height: 20rpx;
				border-radius: 12rpx;
				border: 1rpx solid #2979ff;
				background:  #2979ff;
				position: absolute;
				left: -11rpx;
				top: 0;
				z-index: 4;
			}
		}
	}
	// 表单区域内容样式
	.box {
		padding-bottom: 20rpx;
		margin-top: 30rpx;
		width: 710rpx;
		// height: 1080rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.line {
			width: 710rpx;
			height: 1px;
			background: #E5E5E5;
			overflow: hidden;
		}

		// .title-tools {
		// 	padding: 20rpx 30rpx;

		// 	.search {
		// 		margin-top: -8rpx;
		// 	}
		// }
	}

	//底部按钮样式
	.btn-group {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		margin-bottom: 20rpx;

		.btn {
			width: 345rpx;
			height: 80rpx;
		}
	}

	.wrap {
		display: flex;
		align-items: center;
		padding: 30rpx;
		margin-bottom: 10rpx;

		.radio-wrap {
			flex: 1;
			display: flex;
			justify-content: space-between;

			.radio {
				display: flex;
				align-items: center;

				text {
					margin-left: 21rpx;
				}

				&:nth-child(2) {
					margin-right: 80rpx;
				}
			}
		}

		.search {
			flex: 1;
		}
	}

	.input {
		padding: 0 20rpx;
		margin-top: -30rpx;

		::v-deep.u-input {
			padding: 10rpx !important;
		}
	}

	.btn-wrap {
		margin-top: 30rpx;
	}

	::v-deep .textarea-input {
		margin-top: 30rpx;
		text-indent: 30rpx;
		overflow-y: auto;
		background-color: #EAF1F9 !important;
		border-radius: 10rpx;
	}

	.file-list {
		padding-left: 10rpx;

		.file-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 100rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-bottom: 1px solid #999;

			.name {
				width: 300rpx;
				color: #196EFF;
				text-decoration: underline;
			}

			.delete-btn {
				color: #196EFF;
				text-decoration: underline;
			}

			&:nth-last-child(1) {
				border: none;
			}
		}
	}
	.AIbut{
		text-align: center;
		width: 100%;
		font-size: 32rpx;
		font-weight: 600;
		color: #fff;
		border-radius: 12rpx;
		line-height: 72rpx;
		background: #196EFF;
	}
	.upload-btn {
		color: #196EFF;
		line-height: 180rpx;
		text-align: center;
		border-radius: 10rpx;
		background-color: #EAF1F9;
	}
	.marbot24{
		margin-bottom: 24rpx;
	}
	.marbot16{
		margin-bottom: 16rpx;
	}
	.marbot12{
		margin-bottom: 12rpx;
	}
	.martop24{
		margin-top: 24rpx;
	}
	.martop16{
		margin-top: 16rpx;
	}
	.animated-text {
	      // overflow: hidden;
	      // border-right: .15em solid orange; /* 光标效果 */
	      // animation: typing 3s steps(40) ;
	    }
	
	    // @keyframes typing {
	    //   from {
	    //     width: 0;
	    //   }
	    //   to {
	    //     width: 100%;
	    //   }
	    // }
		
	.title-tools-wrap {
		position: relative;
		// padding-top: 10rpx;
	}
	
	.left-icon {
		width: 8rpx;
		height: 34rpx;
		background: linear-gradient(0deg, #71ADFF 0%, #196EFF 100%);
		border-radius: 4rpx;
	}
	
	.title-text {
		font-weight: bold;
		color: #000000;
	}
	.blueTip{
		padding: 4rpx 8rpx;
		border-radius: 8rpx;
		border: 1px solid #71ADFF;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #71ADFF;
	}
	.right-tools {
		position: absolute;
		right: 0;
		top: 0;
		height: 33rpx;
		line-height: 33rpx;
		font-size: 26rpx;
		color: #929292;
	}
</style>
